<template>
	<view class="content">
		<view style="width: 100%;">
			<view class="user-header uni-flex lyx-flex-align-items-center lyx-flex-justify-content-between" @tap="uploadHeader">
				<view class="uni-flex lyx-flex-align-items-center">
					<view class="header-img">
						<image style="width: 70px;height: 70px;" mode="aspectFill" src="../../static/img/192x192.png"></image>
					</view>
					<view class="user-header-content">
						<view>{{userInfo.nickname}}</view>
						<view>{{userInfo.mobile}}</view>
					</view>
				</view>
				<view class="">
					<uni-icon color="#bbb" size="20" type="arrowright"></uni-icon>
				</view>
			</view>
		</view>


		<view class="uni-card">
			<uni-list>
				<uni-list-item @click="toToPage(item.id)" :title="item.title" :thumb="item.icon" v-for="(item,index) in menus" :key="index"></uni-list-item>
			</uni-list>
		</view>


		<view class="uni-card">
			<uni-list>
				<navigator url="../pwd/pwd">
					<uni-list-item title="修改密码"></uni-list-item>
				</navigator>
				<uni-list-item title="退出登录" @click="bindLogout"></uni-list-item>
			</uni-list>
		</view>

		<view class="btn-row">
			<!-- <button v-if="!hasLogin" type="primary" class="primary" @tap="bindLogin">登录</button> -->
			<!-- <button type="default" @tap="bindLogout">退出登录</button> -->
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		components: {
			uniList,
			uniListItem,
			uniIcon
		},
		computed: {
			...mapState(['hasLogin', 'forcedLogin'])
		},
		data() {
			return {
				userInfo: {},
				menus: []
			}
		},
		onLoad() {
			this.getHlMyInfo();

		},
		methods: {
			...mapMutations(['logout']),
			bindLogin() {
				uni.navigateTo({
					url: '../login/login',
				});
			},
			bindLogout() {
				this.logout();
				/**
				 * 如果需要强制登录跳转回登录页面
				 */

				uni.reLaunch({
					url: '../login/login',
				});

			},
			getHlMyInfo() {
				this.$http.getHlMyInfo().then(rest => {
					console.log(rest)
					this.userInfo = rest.result.userInfo;
					this.menus = rest.result.menus;
				})
			},
			toToPage(e) {
				console.log(e, '点击后执行')
				uni.navigateTo({
					url: '../search-list/searchlist?id=' + e,
				});
			},
			uploadHeader() {
				console.log('123')
// 				uni.chooseImage({
// 					count: 1,
// 					sizeType: ['original', 'compressed'],
// 					sourceType: ['album'], //从相册选择
// 					success: function(res) {
// 						console.log(JSON.stringify(res.tempFilePaths));
// 						const tempFilePaths = res.tempFilePaths;
// 						const uploadTask = uni.uploadFile({
// 							// header:{'Content-Type':'multipart/form-data'},
// 							url: 'https://txy.sylyx.cn/Api/Api/appHeaderUpload', //仅为示例，非真实的接口地址
// 							filePath: tempFilePaths[0],
// 							name: 'file',
// 							formData: {
// 								'user': 'test'
// 							},
// 							success: (uploadFileRes) => {
// 								console.log(JSON.stringify(uploadFileRes));
// 							},
// 							fail: function(error) {
// 								console.log(JSON.stringify(error), '错误信息');
// 							}
// 						});
// 						uploadTask.onProgressUpdate((res) => {
// 							console.log('上传进度' + res.progress);
// 							console.log('已经上传的数据长度' + res.totalBytesSent);
// 							console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
// 
// 							// 测试条件，取消上传任务。
// 							if (res.progress > 50) {
// 								uploadTask.abort();
// 							}
// 						});
// 					}
// 				})

			}
		}
	}
</script>

<style>
	.user-header {
		background-color: #FFFFFF;
		height: 160upx;
		padding: 24upx 30upx;
	}

	.user-header-content {
		margin-left: 10upx;
	}

	.header-im {
		width: 100px;
	}
</style>
